<template>
	<div class="confirm-box border mt-5 d-flex justify-content-between p-4 mx-auto align-items-center">
		<div class="left rounded border ">
			<div class="left-title border rounded-top bg-light d-flex justify-content-between align-items-center">
				<div class="d-flex ps-3">
					<input v-model="checked_allA" class="form-check-input me-1" type="checkbox"
						id="flexCheckIndeterminate" value="">
					<div>列表1</div>
				</div>
				<div class="pe-3">{{ count1 }}/{{ group1.length }}</div>
			</div>
			<div class="list-group overflow-auto">
				<label class="list-group-item border-0" v-for="(item, index) in group1" :key="index">
					<input :disabled="item.disabled" v-model="item.checked" class="form-check-input me-1"
						type="checkbox" value="">
					{{ '备选项'+item.id }}
				</label>
			</div>
		</div>


		<button type="button" :disabled="!checkGroup2" class="btn btn-primary" @click="handleSend(group2,group1)"><i
				class="bi-chevron-left"></i></button>
		<button type="button" :disabled="!checkGroup1" class="btn btn-primary" @click="handleSend(group1,group2)"><i
				class="bi-chevron-right"></i></button>

		<div class="left rounded border ">
			<div class="left-title border rounded-top bg-light d-flex justify-content-between align-items-center">
				<div class="d-flex ps-3">
					<input v-model="checked_allB" class="form-check-input me-1" type="checkbox"
						id="flexCheckIndeterminate" value="">
					<div>列表2</div>
				</div>
				<div class="pe-3">{{ count2 }}/{{ group2.length }}</div>
			</div>
			<div class="list-group overflow-auto">
				<label class="list-group-item border-0" v-for="(item, index) in group2" :key="index">
					<input v-model="item.checked" class="form-check-input me-1" type="checkbox" value="">
					{{ '备选项'+item.id }}
				</label>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			group1: {
				type: Array,
				default: function() {
					return [];
				}
			},
			group2: {
				type: Array,
				default: function() {
					return [];
				}
			},
		},
		data() {
			return {}
		},
		computed: {
			checked_allA: {
				get() {
					if (this.group1.length === 0) {
						return false;
					}
					return this.group1.every((item) => item.checked === true);
				},
				set(newValue) {
					this.group1.forEach((item) => { item.checked = newValue });
				},
			},
			count1() {
				return this.group1.filter(i => i.checked).length;
			},
			checkGroup1() {
				return this.group1.some((item) => item.checked);
			},
			checked_allB: {
				get() {
					if (this.group2.length === 0) {
						return false;
					}
					return this.group2.every((item) => item.checked === true);
				},
				set(newValue) {
					this.group2.forEach((item) => { item.checked = newValue });
				},
			},
			count2() {
				return this.group2.filter(i => i.checked).length;
			},
			checkGroup2() {
				return this.group2.some((item) => item.checked);
			},
		},
		methods: {
			handleSend(source, target) {
				var indexes = [];
				source.forEach(function(item, index) {
					if (item.checked === true && item.disabled === false) {
						item.checked = false;
						target.push(item);
						indexes.push(index);
					}
				});
				for (var i = indexes.length - 1; i >= 0; i--) {
					source.splice(indexes[i], 1);
				}
				target.sort((a, b) => a.id - b.id);
			},
		}
	}
</script>

<style lang="less" scoped>
	.confirm-box {
		width: 800px;

		.left-title {
			height: 40px;
		}

		.list-group {
			height: 300px;
			width: 260px;

			.list-group-item:hover {
				color: blue;
			}
		}

		button {
			width: 60px;
			height: 40px;
		}
	}
</style>
